<div class="table" ng-controller="TableCtrl"
     ng-switch on="tableSelectDetailDisplay">
    <div class="page-wrapper">
        <div class="table-data animate-flip" ng-switch-when="false">
            <div class="table-list">
                <div class="table-row table-head">
                    <div class="table-cell table-head-cell" ng-repeat="item in tableHeadList">{{item.text}}</div>
                    <div class="table-cell table-head-cell">Action</div>
                </div>
                <div class="table-row animate-slide-flip"
                     ng-repeat="row in pagedItems[currentPage]| orderBy:sort.sortingOrder:sort.reverse">
                    <div ng-repeat="item in tableHeadList"
                         class="table-cell {{item.text}}">
                        {{tableDataFilter(row,item.text)}}
                    </div>
                    <div class="table-cell">
                        <a class="table-btn transit delete" ng-click="tableRowDeleted()"></a>
                        <a class="table-btn transit edit" ng-click="tableRowSelected()"></a>
                    </div>
                </div>
                <div class="table-row table-foot">
                    <div ng-repeat="item in tableHeadList" class="table-cell {{item.text}}">
                        {{item.text}}
                    </div>
                    <div class="table-cell">
                        <a class="table-btn transit add" ng-click="tableRowInsert()">+</a>
                    </div>
                </div>
            </div>
            <ul class="table-tag-list">
                <li class="table-tag-item" ng-class="{disabled: currentPage == 0}">
                    <a href ng-click="prevPage()">«</a>
                </li>

                <li class="table-tag-item" ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
                    ng-class="{active: n == currentPage}"
                    ng-click="setPage()">
                    <a href ng-bind="n + 1">1</a>
                </li>

                <li class="table-tag-item" ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
                    <a href ng-click="nextPage()">»</a>
                </li>
            </ul>
        </div>
        <div class="table-detail animate-flip" ng-switch-when="true">
            <a class="button-cancel" ng-click="tableDetailCancel()">X</a>

            <div class="file-wrapper" ng-class="{waiting:tableFileWaiting}">
                <div class="file-select" ng-animate="'animate-fade'" ng-show="!tableUploader.queue.length">
                    <input class="file-input" ng-file-select type="file"/>

                    <div class="well file-drop" ng-file-over>
                        <span>Drop or select your photo here!</span>
                    </div>
                </div>
                <div class="file-preview" ng-animate="'animate-fade'" ng-repeat="item in tableUploader.queue">
                    <div class="file-thumb" ng-show="controller.isImage(item.file)">
                        <div class="file-thumb" ng-show="tableUploader.isHTML5"
                             ng-thumb="{ file: item.file, height: 150 ,width:300}"></div>
                    </div>
                    <div class="file-label">
                        <span class="file-name-limit">File: {{ item.file.name }} </span>
                        <span>{{ item.file.size/1024/1024|number:2 }} Mb</span>
                    </div>
                    <div class="file-btn-remove" ng-click="tableClearAvt()"
                         ng-disabled="!tableUploader.queue.length"></div>
                    <div class="total-progress-box">
                        <div class="total-progress transit" ng-style="{ 'width': tableUploader.progress + '%' }"></div>
                    </div>
                </div>
            </div>
            <div class="table-detail-form">
                <div class="table-detail-row">
                    <div class="table-detail-label">Id</div>
                    <b class="table-detail-label">{{tableItemSelect.id}}</b>
                </div>
                <div class="table-detail-row">
                    <div class="table-detail-label">name</div>
                    <input class="table-detail-input" type="text" ng-model="tableItemSelect.name"/>
                </div>
                <div class="table-detail-row">
                    <div class="table-detail-label">description</div>
                    <textarea class="table-detail-input" name="text" ng-model="tableItemSelect.description"
                              rows="5"></textarea>
                </div>
                <div class="table-detail-row">
                    <div class="table-detail-label">type</div>
                    <input class="table-detail-input" type="text" ng-model="tableItemSelect.type"
                           value="{{tableItemSelect.type}}"/>
                </div>
                <div class="table-detail-row">
                    <div class="table-detail-label">status</div>
                    <input class="table-detail-input" type="text" ng-model="tableItemSelect.status"
                           value="{{tableItemSelect.type}}"/>
                </div>
                <div class="table-detail-row">
                    <div class="table-detail-label">price</div>
                    <input class="table-detail-input" type="text" ng-model="tableItemSelect.price"/>
                </div>
                <div class="table-detail-row">
                    <div class="table-detail-label">created</div>
                    <input class="table-detail-input" type="text" ng-click="datePicker.onSelect($event)"
                           ng-model="tableItemSelect.price" value="{{tableItemSelect.created | date:'M/d/yy'}}"/>
                </div>
                <div class="table-detail-row commander">
                    <button ng-click="tableCommitUpload()">Commit</button>
                    <button ng-click="tableUploader.cancelAll()" ng-disabled="!tableUploader.isUploading">Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>